/**
 * Created by maxiaoqiang on 2018/9/10.
 */
import React, {Component} from "react";

import {Input, TreeSelect, Select, Modal, Button, message, Spin} from 'antd';

const Option = Select.Option;
const {TextArea} = Input;

import "./index.less"
class ChapterComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value:"请选择科目",
            treeData: [],
            data: {
                id: "",
                name: "",
                percent: "",
                examSubjectId: "",
                status: "",
                note: ""
            }
        }
    }

    componentDidMount() {
        if (this.props.data) {
            this.setState({
                data: this.props.data
            })
        }else{
            if (this.props.choose) {
                let data = this.state.data;
                let value = this.props.choose;
                if(value.indexOf("-")){
                    data.examSubjectId = this.props.choose.split("-")[1];
                }
                this.setState({
                    data: data,
                    value: value.indexOf("-")?value:"请选择科目"
                })
            }
        }
        if (this.props.treeData) {
            this.setState({
                treeData: this.props.treeData
            })
        }
    }

    handleChange = (name, value)=> {
        if (name == "examSubjectId") {
            this.state.data[name] = value;
            if(value.indexOf("-")>-1){
                this.setState({ value });
                this.state.data[name] = value.split("-")[1];
            }else{
                this.setState({ value:"请选择科目" });
            }
        } else {
            this.state.data[name] = value.trim();
        }
    };

    saveHandel = ()=> {
        let data = this.state.data;
        if (data.examSubjectId == null || data.examSubjectId.length == 0) {
            message.error("请选择科目");
            return;
        }
        if (data.name.length == 0) {
            message.error("章节名称不能为空");
            return;
        }
        if (data.percent.length == 0) {
            message.error("请输入该章节所占比重");
            return;
        }
        if(data.percent.indexOf("%")==-1){
            message.error("比重格式输入有误, 请输入百分比");
            return;
        }
        data.percent = parseInt(data.percent.split("%")[0]);
        this.props.commitHandle(data);

    };

    render() {
        const data = this.state.data;
        console.log(data);
        return (
            <Modal
                visible={true}
                footer={null}
                closable={!this.state.loading}
                title={this.props.edit?"修改章节":"添加章节"}
                onCancel={()=>{this.props.handleCancel()}}
            >
                <div className="card-subject">
                    <div className="card">
                        科目名称:
                    </div>
                    <div className="card">
                        <TreeSelect
                            style={{ width: 200 }}
                            value={this.state.value}
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            treeData={this.state.treeData}
                            placeholder="请选择科目"
                            treeDefaultExpandAll
                            onChange={(value)=>{this.handleChange("examSubjectId",value)}}
                        />
                    </div>
                </div>
                <div className="card-category">
                    <div>
                        章节名称:
                    </div>
                    <div>
                        <Input
                            defaultValue={data.name}
                            type="text"
                            placeholder="请输入章节名称"
                            onChange={(e)=>{this.handleChange("name",e.target.value)}}
                        />
                    </div>
                </div>
                <div className="card-category">
                    <div>
                        所占比重:
                    </div>
                    <div>
                        <Input
                            defaultValue={data.percent}
                            type="text"
                            placeholder="请输入章节占比(格式  50%)"
                            onChange={(e)=>{this.handleChange("percent",e.target.value)}}
                        />
                    </div>
                </div>
                <div className="card-category" style={{display:"none"}}>
                    <div>
                        是否可用:
                    </div>
                    <div>
                        <Select
                            defaultValue={data.status.toString()}
                            onChange={(value)=>{this.handleChange("status",value)}}
                        >
                            <Option value="0">是</Option>
                            <Option value="1">否</Option>
                        </Select>
                    </div>
                </div>
                <div className="card-category">
                    <div>
                        备注:
                    </div>
                    <div>
                        <TextArea
                            type="text"
                            placeholder="请输入描述或说明"
                            defaultValue={data.note}
                            onChange={(e)=>this.handleChange("note",e.target.value)}
                        />
                    </div>
                </div>
                <div className="submit-div">
                    <Button
                        loading={this.state.loading}
                        type="primary"
                        onClick={this.saveHandel}
                    >
                        {this.props.edit ? "修改" : "保存"}
                    </Button>
                </div>
            </Modal>
        )
    }

}

export default ChapterComponent;